<template>
  <div class="article-list">
    <!-- 首页类型的文章列表 -->
    <template v-if="myType === 'home'">
      <div
        class="item"
        v-for="(item, i) in articlesList"
        :key="i"
        @click="goArticleDetail(item)"
      >
        <!--  头部信息栏  -->
        <div class="item-head">
          <!-- 作者名 -->
          <div class="user-name">
            {{
              item.item_info.author_name ||
              item.item_info.author_user_info.user_name
            }}
          </div>
          <!-- 时间栏 -->
          <div class="time">
            <el-divider direction="vertical"></el-divider>
            {{
              (item.item_info.ctime || item.item_info.article_info.rtime)
                | timeago
            }}
            <el-divider
              v-if="item.item_type === 2"
              direction="vertical"
            ></el-divider>
          </div>
          <!-- 文章标签 -->
          <div class="tag-list">
            <span
              class="tag"
              v-show="item.item_type === 2"
              v-for="(item2, i) in item.item_info.tags"
              :key="i + 'tag'"
            >
              {{ item2.tag_name }}
            </span>
          </div>
          <!-- 广告标签 -->
          <div v-if="item.item_info.item_type === 14" class="is-ad">广告</div>
        </div>
        <!-- 中下内容 -->
        <div class="item-body">
          <!-- 内容主体 -->
          <div class="main">
            <!-- 标题 -->
            <div class="title">
              {{ item.item_info.title || item.item_info.article_info.title }}
            </div>
            <!-- 文章预览 -->
            <div class="content">
              {{
                item.item_info.brief ||
                item.item_info.article_info.brief_content
              }}
            </div>
            <!-- 下方操作按钮 -->
            <div class="action-list" v-if="item.item_type === 2">
              <!-- 查看数 -->
              <div class="action-list-item">
                <img src="../../assets/img/home-content/view.png" alt="" />
                <span>{{ item.item_info.article_info.view_count }}</span>
              </div>
              <!-- 点赞数 -->
              <div class="action-list-item">
                <img src="../../assets/img/home-content/like.png" alt="" />
                <span>{{ item.item_info.article_info.digg_count }}</span>
              </div>
              <!-- 回复数 -->
              <div class="action-list-item">
                <img src="../../assets/img/home-content/reply.png" alt="" />
                <span>{{ item.item_info.article_info.comment_count }}</span>
                <!-- <span>{{ item.item_info.article_info.cover_image }}</span> -->
                <!-- <span>{{ item.item_info.article_info.cover_image }}</span> -->
              </div>
            </div>
          </div>
          <!-- 图片 -->
          <template
            v-if="item.item_info.picture || item.item_info.article_info"
          >
            <img
              class="item-img"
              v-show="
                item.item_info.picture ||
                item.item_info.article_info.cover_image
              "
              v-lazy="
                item.item_info.picture ||
                item.item_info.article_info.cover_image
              "
            />
          </template>
        </div>
      </div>
    </template>

    <!-- 文章页的列表 -->
    <template v-if="myType === 'article'">
      <div
        class="item"
        v-for="(item, i) in articlesList"
        :key="i"
        @click="goArticleSelf(item.article_id)"
      >
        <!--  头部信息栏  -->
        <div class="item-head">
          <!-- 作者名 -->
          <div class="user-name">
            {{ item.author_user_info.user_name }}
          </div>
          <!-- 时间栏 -->
          <div class="time">
            <el-divider direction="vertical"></el-divider>
            {{ item.article_info.rtime | timeago }}
            <el-divider direction="vertical"></el-divider>
          </div>
          <!-- 文章标签 -->
          <div class="tag-list">
            <span class="tag" v-for="(item2, i) in item.tags" :key="i + 'tag'">
              {{ item2.tag_name }}
            </span>
          </div>
        </div>
        <!-- 中下内容 -->
        <div class="item-body">
          <!-- 内容主体 -->
          <div class="main">
            <!-- 标题 -->
            <div class="title">
              {{ item.article_info.title }}
            </div>
            <!-- 文章预览 -->
            <div class="content">
              {{ item.article_info.brief_content }}
            </div>
            <!-- 下方操作按钮 -->
            <div class="action-list" v-if="item.item_type === 2">
              <!-- 查看数 -->
              <div class="action-list-item">
                <img src="../../assets/img/home-content/view.png" alt="" />
                <span>{{ item.article_info.view_count }}</span>
              </div>
              <!-- 点赞数 -->
              <div class="action-list-item">
                <img src="../../assets/img/home-content/like.png" alt="" />
                <span>{{ item.article_info.digg_count }}</span>
              </div>
              <!-- 回复数 -->
              <div class="action-list-item">
                <img src="../../assets/img/home-content/reply.png" alt="" />
                <span>{{ item.article_info.comment_count }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <!-- 搜索页的各种数据 -->
    <template v-if="myType === 'search'">
      <!-- 搜索页的文章 -->
      <template v-if="searchArticle.length">
        <SearchArticle :searchArticle="searchArticle"></SearchArticle>
      </template>
      <!-- 搜索页的用户列表 -->
      <template v-else-if="searchUser.length">
        <SearchUser :searchUser="searchUser"></SearchUser>
      </template>
      <!-- 搜索页的标签列表 -->
      <template v-else-if="searchTag.length">
        <SearchTag :searchTag="searchTag"></SearchTag>
      </template>
      <template v-else>
        <div class="not-found">没有找到鸭...</div>
      </template>
    </template>
  </div>
</template>

<script>
import SearchUser from './componets/SearchUser.vue'
import SearchTag from './componets/SearchTag.vue'
import SearchArticle from './componets/SearchArticle.vue'
export default {
  methods: {
    // 前往文章详情页
    goArticleDetail(item) {
      // 如果是文章类型
      if (item.item_type === 2) {
        this.$router.push(
          `/article?id=${item.item_info.article_info.article_id}`
        )
        console.log(item.item_info.article_info.article_id)
      }
      // 广告类型
      else {
        this.$message.warning('没有广告的接口,就不跳转了')
        console.log(item.item_info.advert_id)
      }
    },
    // 在本文章页面进行跳转
    goArticleSelf(id) {
      this.$router.push(`/article/?id=${id}`)
      console.log('跳转')
      window.location.reload()
    }
  },
  props: {
    articlesList: {
      type: Array,
      default: () => {
        return []
      }
    },
    myType: {
      type: String,
      default: 'home'
    },
    searchArticle: {
      type: Array,
      default: () => {
        return []
      }
    },
    searchUser: {
      type: Array,
      default: () => {
        return []
      }
    },
    searchTag: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {
    SearchUser,
    SearchTag,
    SearchArticle
  }
}
</script>

<style lang="less" scoped>
.article-list {
  width: 100%;

  .item {
    display: flex;
    cursor: pointer;
    flex-direction: column;
    padding: 12px 20px 0;

    .item-head {
      display: flex;
      font-size: 13px;
      line-height: 22px;
      color: #4e5969;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      align-items: center;

      .user-name:hover {
        color: var(--taojin-brand-2-hover);
      }

      .tag-list {
        overflow: hidden;
        text-overflow: ellipsis;
        .tag:not(:last-child):after {
          display: inline-block;
          content: ' ';
          transform: translate(3px, -3px);
          height: 2px;
          width: 2px;
          border-radius: 50%;
          background: #4e5969;
        }

        .tag {
          padding: 0 8px 0 0;
        }

        .tag:hover {
          color: var(--taojin-brand-2-hover);
        }
      }

      .is-ad {
        margin-left: auto;
        border: 1px solid #c9cdd4;
        border-radius: 2px;
        line-height: 18px;
        width: 42px;
        text-align: center;
        color: #c9cdd4;
        font-size: 13px;
      }
    }

    .item-body {
      display: flex;
      justify-content: space-between;
      margin-top: 0.5rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid #e5e6eb;
      .main {
        overflow: hidden;

        .title {
          color: var(--title-color);
          font-size: 1.5rem;
          font-weight: 700;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .content {
          color: var(--text-color);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 0.8rem 0;
        }

        .action-list {
          display: flex;
          .action-list-item {
            display: flex;
            align-items: center;
            img {
              width: 1.4rem;
              height: 1.4rem;
              color: var(--like-color);
            }
            span {
              margin: 0 1rem 0 0.5rem;
            }
          }
          .search {
            border: 1px solid #edeeef;
            display: flex;
            justify-content: center;
            padding: 3px 10px;
            color: #b2bac2;
            span {
              margin: 0 0 0 5px;
            }
          }

          .search:hover {
            background-color: #f7f8fa;
          }
          .tag-share {
            display: none;
          }
        }
        .action-list:hover {
          .tag-share {
            display: inline-flex;
          }
        }
      }
      .item-img {
        flex: 0 0 auto;
        width: 120px;
        height: 80px;
        margin-left: 1rem;
        border-radius: 2px;
      }
    }
  }

  .item:hover {
    background-color: rgba(242, 242, 242, 0.4);
  }
}

.not-found {
  margin: 5rem;
  text-align: center;
  padding: 1rem 2rem;
  color: #4e5969;
  font-size: 20px;
}
</style>
